<template>
  <div class="app-container">
    <el-card class="card" body-style="{ padding: '10px 20px' }">
      <div style="color: rgba(0, 0, 0, 0.45);font-weight: bold;">商户数</div>
      <div style="margin-top: 45px;">
        <count-to :start-val="0" :end-val="businessNum" :duration="3000" class="card-panel-num" />
      </div>
    </el-card>
    <el-card class="card">
      <div style="color: rgba(0, 0, 0, 0.45);font-weight: bold;">新增用户数</div>
      <div style="margin-top: 45px;">
        <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
      </div>
    </el-card>
    <el-card class="card">
      <div style="color: rgba(0, 0, 0, 0.45);font-weight: bold;">累计用户数</div>
      <div style="margin-top: 45px;">
        <count-to :start-val="0" :end-val="userNum" :duration="3000" class="card-panel-num" />
      </div>
    </el-card>
  </div>
</template>
  
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import CountTo from 'vue-count-to'
const animationDuration = 6000
import {getCount} from '@/api/shop/charts'
export default {
  components: {
    CountTo
  },
  mixins: [resize],
  props: {

  },
  data() {
    return {
      businessNum: 0,
      userNum: 0
    }
  },
  mounted() {
    this.getNum()
  },

  methods: {
    getNum() {
      getCount().then(response => {
        this.businessNum = response.data.businessNum
        this.userNum = response.data.userNum
        console.log(response)
      })
    },
  }
}
</script>
<style scoped>
.app-container {
  display: flex;
  justify-content: space-around;

}

.card {
  width: 160px;
  height: 146px;
}
.card-panel-num{
  font-weight: bold;
  color: #666;
  margin-bottom: 2px;
}
</style>